<template>
	<div class="actives">
		<div class="fixed">
			<div class="title flex">
				<div class="title_left">
					<img @click="back" src="../assets/image/return.png" />
				</div>
				<div class="add">
					评价详细
				</div>
				<div>

				</div>
			</div>

			<div class="top flex">

				<div v-for="(item,index) in nameoptions" v-bind:class="{active:index==isActive}" @click="checkItem(index)">{{item.titile}}</div>

			</div>
		</div>
		<div class="lists" v-if="1==1">

			<div class="list " v-for="(item,index) in tableData" :key="index">
				<div class="list_top flex">
					<div class="list_top_left flex">
						<span>
						天天爱笑的猪
					</span>
						<el-rate v-model="item.geval_scores"  disabled show-score disabled-void-color="#F2F2F2" text-color="#ff9900" score-template="{value}" id="pingfen" class="flex">
						</el-rate>
					</div>
					<div class="list_top_right flex">
						<span>{{item.geval_addtime}}</span>
					</div>
				</div>
				<div class="detail">
					{{item.geval_content}}
				</div>

			</div>
		</div>
        <div class="none flex " v-else>
        	暂时还没有评论哦~
        </div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				show: -1,
				value: 3.7,
				activeIndex: -1,
				liyou: "拒绝该商家参与此拼券活动的拒绝理由说明，仅文字展示即可，点击该弹窗右上角的“×”，或下方“我知道了”按钮，效果均为关闭该弹窗。",
				nameoptions: [{
						titile: '全部评价'
					},
					{
						titile: '好评(20)'
					},
					{
						titile: '中评(10)'
					},
					{
						titile: '差评(6)'
					}
				],
				tableHeight: null,
				tableData: [{
					date: '1001',
					name: '满100减￥30',
					status: '报名成功',
					bcy: '10/2/3',

				}, {
					date: '1001',
					name: '满100减￥30',
					status: '未审核',
					bcy: '10/2/3',

				}, {
					date: '1001',
					name: '满100减￥30',
					status: '审核失败',
					bcy: '10/2/3'
				}, {
					date: '1001',
					name: '满100减￥30',
					status: '未审核',
					bcy: '10/2/3',

				}, {
					date: '1001',
					name: '满100减￥30',
					status: '审核失败',
					bcy: '10/2/3'
				}, {
					date: '1001',
					name: '满100减￥30',
					status: '未审核',
					bcy: '10/2/3',

				}, {
					date: '1001',
					name: '满100减￥30',
					status: '审核失败',
					bcy: '10/2/3'
				}, {
					date: '1001',
					name: '满100减￥30',
					status: '未审核',
					bcy: '10/2/3',

				}, {
					date: '1001',
					name: '满100减￥30',
					status: '审核失败',
					bcy: '10/2/3'
				}, {
					date: '1001',
					name: '满100减￥30',
					status: '未审核',
					bcy: '10/2/3',

				}, {
					date: '1001',
					name: '满100减￥30',
					status: '审核失败',
					bcy: '10/2/3'
				}, {
					date: '1001',
					name: '满100减￥30',
					status: '未审核',
					bcy: '10/2/3',

				}, {
					date: '1001',
					name: '满100减￥30',
					status: '审核失败',
					bcy: '10/2/3'
				}]
			}
		},
		//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
		created: function() {

		},
		methods: {
			back() {
				this.$router.go(-1)
			},

			checkItem(index) {
				this.isActive = index;
			},
			showop(index) {
				let that = this;
				if(that.show == index) {
					that.show = -1; //在这里就将它赋值为-1  由于：-1 !=  index 所以其他内容隐藏 ，被点击的则打开
				} else {
					that.show = index; //这里是把index赋值给isShow，isShow=index则显示
				}

			},
			//查看详情
			creat_c() {
				this.$router.push({
					path: '/Create_coupons'
				});
			},
			showtost() {
				$(".mask").css('display', 'block');

			},
			yincang() {
				$(".mask").css('display', 'none');
			},
			 checkTime(i){
			       if(i<10){
			            i = '0'+i
			       }
			        return i
			},
			search(){
				var date; 
				date= new Date(this.active_start_time)
                 var date_star_Time = date.getFullYear()+'-'+this.checkTime(date.getMonth()+1)+'-'+this.checkTime(date.getDate());
                 date= new Date(this.active_end_time)
                 var date_end_Time = date.getFullYear()+'-'+this.checkTime(date.getMonth()+1)+'-'+this.checkTime(date.getDate());
                this.show(date_star_Time,date_end_Time,this.address)
			},
			 list(){
           	var that=this;
      var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/storemy/store_memebr_info", qs.stringify({
						"store_id": localStorage.getItem("store_id"),
						"key":localStorage.getItem("key")
				})).then(response => {
					
					that.tableData=response.data.data
					console.log(that.tableData)
					})
					.catch(error => {

					});
    
           }
		},
		mounted() {
  this.list()

		},
	}
</script>

<style>
	.el-icon-star-on:before {
		content: "\E797";
		font-size: 0.47826rem;
		line-height: 20px;
	}
	
	.el-rate__text {
		font-size: 0.47826rem;
		vertical-align: middle;
	}
</style>
<style scoped="scoped">
	.active {
		color: #007AFF;
	}
	
	.top {
		font-size: 0.60869rem;
		width: 100%;
		max-width: 640px;
		background: white;
		justify-content: space-around;
		padding-bottom: 0.3rem;
	}
	
	#pingfen {
		align-items: center;
	}
	
	.title_left {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.title_left>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.lists {
		-webkit-overflow-scrolling: touch;
		position: fixed;
		bottom: 0;
		top: 3rem;
		background: #F5F6FA;
		width: 100%;
		padding: 1rem 0;
		overflow-y: scroll;
	}
	
	.list {
		/*border: 1px solid white;*/
		margin-bottom: 0.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		padding: 0.1rem 0.8rem;
		background: white;
		background-size: 100%;
		border-radius: 10px;
	}
	
	.fixed {
		position: fixed;
		top: 0;
		background: white;
		width: 100%;
		max-width: 640px;
		z-index: 99;
	}
	
	.title {
		width: 90%;
		padding: 0 5% 0 5%;
		height: 2rem;
		font-size: 0.7193rem;
		background: white;
		padding-bottom: 0.45217rem;
		align-items: center;
	}
	
	.title div {
		width: calc(100%/3);
		align-items: center;
	}
	
	.title>div:nth-child(2) {
		text-align: center;
	}
	
	.add>img {
		width: 1rem;
		height: 1rem;
	}
	
	.left {
		flex-direction: column;
	}
	
	.list_top {
		font-size: 0.60869rem;
		color: #868E91;
		justify-content: space-between;
		padding: 0.5rem 0;
	}
	
	.list_top_left>span {
		padding-right: 0.5rem;
	}
	
	.list_top_left {
		align-items: center;
	}
	
	.list_top_right {
		color: #D1D5D8;
		font-size: 0.52173rem;
		align-items: center;
		justify-content: flex-end;
	}
	
	.detail {
		font-size: 0.565217rem;
		padding-bottom: 0.5rem;
	}
	.none{
		position: fixed;
		width: 100%;
		height: 100%;
		background: #F5F6FA;
		justify-content: center;
		align-items: center;
		font-size: 0.5217rem;
	}
</style>